<template>
	<view>
		<view class="top_but">
			<view class="banmi_flex j-b">
				<view class="banmi_flex j-c a-c" style="width: 180rpx;height: 100rpx;">
					<text>选择类型</text>
				</view>
				<view class="">
					<button @click="on_close" class="banmi_flex j-c a-c" style="width: 120rpx;height: 100rpx;">
						<text>关闭</text>
					</button>
				</view>
			</view>
		</view>
		<view class="" style="height: 20rpx;">
		</view>
		<view>
			<view class="banmi_flex" style="">
				<view class="  p-20" style="width: 100%;padding-right: 60px;padding-left: 20px;">
					<view class="banmi_flex a-c  p-b-10" sp-b-10>
						<view class="f-14 c-7" style="width: 100px;">
							开启的值
						</view>
						<uni-easyinput confirm-type="search" @confirm="subQuestion" v-model="find.start"
							placeholder="请输入开启的值">
						</uni-easyinput> 
					</view>
					<view class="banmi_flex a-c  p-b-10" sp-b-10>
						<view class="f-14 c-7" style="width: 100px;">
							关闭的值
						</view>
						<uni-easyinput confirm-type="search" @confirm="subQuestion" v-model="find.close"
							placeholder="请输入关闭的值">
						</uni-easyinput> 
					</view>
					<view class="banmi_flex a-c  p-b-10" style="padding-top: 40rpx;">
						<view class="f-14 c-7" style="width: 100px;">
						</view>
						<view class="">
							<button type="default" size="mini" @click="subQuestion" class="sub_btn">确认</button>
						</view>
					</view>
					<view class="" style="height: 120px;">
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js'
	export default {
		components: {

		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			windowHeight: {
				type: Number,
				default () {
					return 0;
				}
			},
			zu_diy_list_find: {
				type: Object,
				default () {}
			},
			windowWidth: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				find: {
					start: '',
					close:''
				},
				field_type_list: [{
						text: '普通字符',
						value: 'text'
					},
					{
						text: '时间戳',
						value: 'time'
					},
					{
						text: '富文本',
						value: 'content'
					},
					{
						text: '图片',
						value: 'img'
					},
					{
						text: '开关按钮',
						value: 'switch'
					},
				]
			}
		},
		mounted() {

		},

		methods: {
		 
			on_close() {
				this.popup.close()
			},
			subQuestion() {
				if (!this.find.start) {
					uni.showToast({
						title:'请输入开启的值',
						icon:'error'
					})
					return
				} 
				if (!this.find.close) {
					uni.showToast({
						title:'请输入关闭的值',
						icon:'error'
					})
					return
				} 
				this.$emit('img_ok', this.find)
				this.popup.close()
			},


		}
	}
</script>

<style>
	button {
		padding: 0;

		background: transparent;
	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>